<template>
<view class="page"> 
	<template>
		<view class="body"> 		
			<view class="list-wrap">
				<view class="item m-b2 m-t2">
					<view class="tp m-b1">
						<view class="avator"><image src="@/static/images/avator.png" mode="widthFix"></image></view>
						<view class="user">
							<view class="f-s28">{{detail.nickname}}</view>
							<view class="f-s24 f-grey">{{detail.expert}}</view>
						</view>
					</view>
					<view class="content m-b2">{{detail.answer}}</view>
					<view class="ft"><text>{{detail.create_time}}</text></view>
				</view> 
			</view>
			
			<view v-if="list.length>0" class="mod-wrap">
				<view class="hd-title">{{list.length}}条回复</view>
				<view class="con">
					<view class="list-wrap">
						<view class="item m-b2" v-for="(item,index) in list" :key="index">
							<view class="tp m-b1">
								<view class="avator"><image src="@/static/images/avator.png" mode="widthFix"></image></view>
								<view class="user">
									<view class="f-s28">{{item.nickname}}</view>
									<view class="f-s24 f-grey">{{item.expert}}</view>
								</view>
							</view>
							<view class="content m-b2">{{item.content}}</view>
							<view class="ft"><text>{{item.create_time}}</text></view>
						</view> 
					</view>					 
				</view>
			</view>
		</view>
		
		<view class="footer" :style="{'height':d_height+'px'}">
			<view class="fix-wrap detail-footer" :style="{'height':d_height+'px'}">
				<textarea v-model="answer" placeholder="我来写回答" auto-height @keyboardheightchange="keyboardheightchange"></textarea> 
				<view class="send-btn" @click="send">发布</view>
			</view>
		</view> 
	</template>
</view>
</template>

<script>
 

export default{
	name:'list',
	data(){
		return {
			type:'1',
			isIphoneX:false,
			id:'', 
			ask_id:'',
			detail:{}, 
			htmlContent:[],
			label:[],
			list:[],
			loadingState:{
				default:false,
				loading:true
			}, 
			d_height:80,
			answer:'',
			userInfo:uni.getStorageSync('userInfo'), 
		}
	},
	async onLoad(params) {  
		this.id=params.id;
		this.ask_id=params.ask_id;
		this.answerdetail();  
		this.commentindex(); 
	},
	mounted() {
		 
	},
	onReachBottom(){
		 	 
	},
	methods:{
		 
		answerdetail:async function(){
		 	let res=await this.$api.user_api.answerdetail({				 
		 		answer_id: this.id 
		 	})  
		 	   
		 	if(res.data.code==0){		 		 
				this.detail=res.data.data;
		 	}   
		}, 
		
		commentindex:async function(){
		 	let res=await this.$api.user_api.commentindex({				 
		 		answer_id: this.id 
		 	})  
		 	   
		 	if(res.data.code==0){		 		 
				this.list=res.data.data;
		 	}   
		}, 
		
		async send(){
			let res=await this.$api.user_api.commentissue({
				answer_id:this.id,
				content: this.answer
			})  
			if(res.data.code==0){
				uni.showToast({
					mask:true,
					title:'发布成功'
				})
				this.answer='';
				this.$store.commit('comment_update',1);
			}
		},
		 
	},
	components:{  
	 
	},
	computed:{
		list_update(){  
			return this.$store.state.comment
		}		
	},
	watch:{
		list_update(newer,older){ 
			if(newer!=older){
				console.log('数据更新')
				this.list=[];
				this.commentindex();
			}
		}
	},
}
</script>

<style lang="less" scoped>
	.title-wrapp{
		padding: 20rpx;
		background: #333;
		color: #fff;
	}
	.mod-wrap{
		.hd-title{
			padding: 20rpx 30rpx;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	.list-wrap{
		padding: 0 30rpx;
		.item{
			padding: 30rpx;
			background: #fff;
			border-radius: 15rpx;
			.tp{
				display: flex;
				.avator{
					width: 90rpx;
					height: 90rpx;
					margin-right: 20rpx;
				}
			}
			.content{
				padding: 10rpx 0;
				font-size: 28rpx;
				color: #333;
			}
			.ft{
				color: #999;
				font-size: 26rpx;
				.label{
					padding: 10rpx 20rpx;
					margin-right: 20rpx;
					background: #f5f5f5;
					border-radius: 38rpx;
					color: #333; 
				}
			}
		}
	}
	.footer{
		min-height:100rpx;
	}
	.footer .fix-wrap{
		left: 0;
		bottom:0;
		width:100%;
		min-height:148rpx;
		border-top:2rpx solid #eee;
		background: #fff;
	}
	.detail-footer{ 
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		background: #f00; 
		textarea{
			width: 75%;			 
			border: 2rpx solid #eee;
			background: #f5f5f5;
			border-radius: 38rpx;   
			margin:20rpx auto;
			padding:5rpx 2%;			
			color:#333;
			font-size: 28rpx;
		}
		.send-btn{
			height:80rpx;
			line-height: 80rpx;
			padding: 0 20rpx;
			margin-right: 20rpx;
			background: #00aa7f;
			border-radius: 5rpx;
			color: #fff;
			font-size: 28rpx;
		} 
	} 
</style>
